<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">Navbar</h2>
                  <p>Documentation and examples for responsive navigation header. Includes support for branding, navigation, and more, including support for the collapse plugin.</p>
                  <a href="http://getbootstrap.com/docs/4.0/components/navbar" target="_blank">Open Bootstrap Docs</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="example">Example</h3>
                <div class="code-example">
                  <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
                    <a class="navbar-brand" href="#">Boomerang</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_example_1" aria-controls="navbar_example_1" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar_example_1">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbar_1_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                          <div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                      </ul>
                      <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                          <a class="nav-link nav-link-icon" href="#"><i class="fas fa-cogs"></i></a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link nav-link-icon" href="#" id="navbar_1_dropdown_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bell"></i></a>
                          <div class="dropdown-menu dropdown-menu-right dropdown-menu-xl py-0">
                            <div class="py-3 px-3">
                              <h5 class="heading h6 mb-0">Notifications</h5>
                            </div>
                            <div class="list-group">
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-purple">JD</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-pink">TC</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Tom Cruise <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-blue">WS</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Will Smith <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                            </div>
                            <div class="py-3 text-center">
                              <a href="#" class="link link-sm link--style-3">View all notifications</a>
                            </div>
                          </div>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link nav-link-icon" href="#" id="navbar_1_dropdown_3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <h6 class="dropdown-header">User menu</h6>
                            <a class="dropdown-item" href="#">
                              <span class="float-right badge badge-primary">4</span>
                              <i class="fas fa-envelope text-primary"></i>Messages
                            </a>
                            <a class="dropdown-item" href="#">
                              <i class="fas fa-cog text-primary"></i>Settings
                            </a>
                            <div class="dropdown-divider" role="presentation"></div>
                            <a class="dropdown-item" href="#">
                              <i class="fas fa-sign-out-alt text-primary"></i>Sign out
                            </a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </nav>
                </div>
                <div class="highlight">
                  <pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark bg-primary rounded"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Boomerang<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbar_example_1"</span> <span class="na">aria-controls=</span><span class="s">"navbar_example_1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbar_example_1"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbar_1_dropdown_1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>Dropdown<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbar_1_dropdown_1"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav ml-auto"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link nav-link-icon"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-cogs"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link nav-link-icon"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbar_1_dropdown_2"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-bell"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right dropdown-menu-xl py-0"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-3 px-3"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"heading h6 mb-0"</span><span class="nt">&gt;</span>Notifications<span class="nt">&lt;/h5&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-purple"</span><span class="nt">&gt;</span>JD<span class="nt">&lt;/span&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Johnyy Depp <span class="nt">&lt;small&gt;</span>10:05 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;/a&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-pink"</span><span class="nt">&gt;</span>TC<span class="nt">&lt;/span&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Tom Cruise <span class="nt">&lt;small&gt;</span>10:05 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;/a&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action d-flex align-items-center"</span><span class="nt">&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-img"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar bg-blue"</span><span class="nt">&gt;</span>WS<span class="nt">&lt;/span&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-content"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group-heading"</span><span class="nt">&gt;</span>Will Smith <span class="nt">&lt;small&gt;</span>10:05 PM<span class="nt">&lt;/small&gt;&lt;/div&gt;</span>
                                <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-sm"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor<span class="nt">&lt;/p&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-3 text-center"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link link-sm link--style-3"</span><span class="nt">&gt;</span>View all notifications<span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link nav-link-icon"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbar_1_dropdown_3"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-user"</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;h6</span> <span class="na">class=</span><span class="s">"dropdown-header"</span><span class="nt">&gt;</span>User menu<span class="nt">&lt;/h6&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"float-right badge badge-primary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-envelope text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Messages
                    <span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-cog text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Settings
                    <span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-sign-out-alt text-primary"</span><span class="nt">&gt;&lt;/i&gt;</span>Sign out
                    <span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
                </div>
                <h3 id="variations">Variations</h3>
                <div class="mt-5 mb-4">
                  <nav class="navbar navbar-expand-lg navbar-light bg-secondary rounded">
                    <a class="navbar-brand" href="#">Boomerang</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_example_2" aria-controls="navbar_example_2" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar_example_2">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbar_1_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                          <div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                      </ul>
                      <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                          <a class="nav-link nav-link-icon" href="#"><i class="fas fa-cogs"></i></a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link nav-link-icon" href="#" id="navbar_2_dropdown_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bell"></i></a>
                          <div class="dropdown-menu dropdown-menu-right dropdown-menu-xl py-0">
                            <div class="py-3 px-3">
                              <h5 class="heading h6 mb-0">Notifications</h5>
                            </div>
                            <div class="list-group">
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-purple">JD</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-pink">TC</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Tom Cruise <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                              <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                  <span class="avatar bg-blue">WS</span>
                                </div>
                                <div class="list-group-content">
                                  <div class="list-group-heading">Will Smith <small>10:05 PM</small></div>
                                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                              </a>
                            </div>
                            <div class="py-3 text-center">
                              <a href="#" class="link link-sm link--style-3">View all notifications</a>
                            </div>
                          </div>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link nav-link-icon" href="#" id="navbar_2_dropdown_3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
                          <div class="dropdown-menu dropdown-menu-right">
                            <h6 class="dropdown-header">User menu</h6>
                            <a class="dropdown-item" href="#">
                              <span class="float-right badge badge-primary">4</span>
                              <i class="fas fa-envelope text-primary"></i>Messages
                            </a>
                            <a class="dropdown-item" href="#">
                              <i class="fas fa-cog text-primary"></i>Settings
                            </a>
                            <div class="dropdown-divider" role="presentation"></div>
                            <a class="dropdown-item" href="#">
                              <i class="fas fa-sign-out-alt text-primary"></i>Sign out
                            </a>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </nav>
                </div>
                <div class="mb-5">
                  <nav class="navbar navbar-expand-lg navbar-dark bg-tertiary rounded">
                    <a class="navbar-brand" href="#">Boomerang</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_3" aria-controls="navbar_3" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbar_3">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbar_3_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                      </ul>
                      <form class="form-inline my-2 my-lg-0">
                        <input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
                        <button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Search</button>
                      </form>
                    </div>
                  </nav>
                </div>
                <div class="card bg-secondary">
                  <div class="card-body">
                    <h6 class="title-decorative">Additional Class Reference</h6>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.navbar-light</code>
                      </dt>
                      <dd class="col-8">Apply to <code>.navbar</code> for use with light background colors</dd>
                    </dl>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.navbar-dark</code>
                      </dt>
                      <dd class="col-8">Apply to <code>.navbar</code> for use with dark background colors</dd>
                    </dl>
                    <dl class="row justfiy-content-between">
                      <dt class="col-4"><code>.bg-{color}</code>
                      </dt>
                      <dd class="col-8">Apply to <code>.navbar</code> to change its background color</dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#example">Example</a></li>
                    <li class="toc-entry toc-h3"><a href="#variations">Variations</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>